<template>
  <div class="toast-wrapper" v-show="isToasting">
    <!-- <div class="toast-mask"></div> -->
    <div class="toast-box" :class="{icon0: toast.icon == 0, icon1: toast.icon == 1, icon2: toast.icon == 2, showing: isToasting}">
      <i class="glyphicon"></i>
      <span>{{toast.info}}</span>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters({
      isToasting: 'getIsToasting',
      toast: 'getToast'
    })
  }
}
</script>

<style lang="less" scoped>
@import "../../assets/less/base/variables.less";
@import "../../assets/less/mixins/opacity.less";
.toast-wrapper{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,.2);
  z-index: 3000;
}
.toast-box{
  position: absolute;
  // margin-top: -20px;
  padding: 10px 24px;
  color: @white;
  box-shadow: 2px 3px 6px @grey99;
  border-radius: 4px;
  display: flex;
  align-items: center;
  .opacity(.9);
  animation: boostOut .2s ease;
  // z-index: 1000;
  &.showing{
    animation: boostIn .2s ease;
  }
  >.glyphicon{
    display: inline-block;
    margin-right: 10px;
    width: 24px;
    height: 24px;
    vertical-align: bottom;
    background: url(../../assets/img/ake-icon.png) no-repeat center center;
    // background-position: 0 0;
    position: relative;
  }
  &.icon0{
    background-color: @blue;
    >.glyphicon{
      width: 0;
      height: 0;
      background: none;
    }
  }
  &.icon1{
    background-color: @green;
    >.glyphicon{
      background-position: -164px 0px;
    }
  }
  &.icon2{
    background-color: @red;
    >.glyphicon{
      background-position: -190px 0px;
    }
  }
  > span{
    display: inline-block;
    font-size: 16px;
    letter-spacing: 1px;
    max-width: 240px;
  }
}

@-webkit-keyframes boostIn { /* 默认 */
    0% {
        opacity: 0;
        -webkit-transform: scale(.5);
        transform: scale(.5)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
@keyframes boostIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.5);
        -ms-transform: scale(.5);
        transform: scale(.5)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes boostOut { /* 默认 */
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(.5);
        transform: scale(.5)
    }
}
@keyframes boostOut {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(.5);
        transform: scale(.5)
    }
}
</style>
